.b-popup {
  .b-popup-mask {
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.7);
    position: fixed;
    top: 0;
    left: 0;
  }

  .b-popup-content {
    width: 100px;
    position: fixed;
    height: 100vh;
    z-index: 3;
    background: white;
    transition: 0.2s ease-out;
  }
  .slide-right {
    right: 0;
    transform: translate(100%, 0);
  }
  .slide-left {
    left: 0;
    transform: translate(-100%, 0);
  }
  .slide-top {
    width: 100vw;
    height: 30px;
    top: 0;
    transform: translate(0, -100%);
  }
  .slide-bottom {
    width: 100vw;
    height: 30px;
    bottom: 0px;
    transform: translate(0, 100%);
  }
  .slide-right--show,
  .slide-left--show,
  .slide-top--show,
  .slide-bottom--show {
    transform: translate(0);
  }
}
